<template>
	<view class="">
		<view class="user-panel">
			<view class="flex">
				<view class="selectMonth" @click="selectMonthShow = true">
					<uni-icons custom-prefix="iconfont"  type="icon-date" color="#000" size="18"/>
					<text>{{sdate}}</text>
				</view>
			</view>
			<view class="amount">
				<view>
					<text class="fsize-24">可结算金额￥</text>
					<text>{{achievement.canTocashBonus}}</text>
				</view>
				<view class="mt-10 width-200"><u-button text="结算提成" shape="circle" @click="showJsPopup=true"></u-button></view>
			</view>
			
			<view class="achievementachievement">
				<view class="flex pt-40">
					<view class="utim flex align-center justify-center column w-25">
						<view class="value">
							<text class="fsize-20">￥</text>
							<text>{{achievement.saleBonus}}</text>
						</view>
						<text class="label">销售提成</text>
					</view>
					<view class="utim flex align-center justify-center column w-25">
						<view class="value">
							<text class="fsize-20">￥</text>
							<text>{{achievement.serviceBonus}}</text>
						</view>
						<text class="label">服务提成</text>
					</view>
					<view class="utim flex align-center justify-center column w-25">
						<view class="value">
							<text class="fsize-20">￥</text>
							<text>{{achievement.stockholderBonus}}</text>
						</view>
						<text class="label">联创提成</text>
					</view>
					<view class="utim flex align-center justify-center column w-25">
						<view class="value">
							<text class="fsize-20">￥</text>
							<text>{{achievement.targetAmount}}</text>
						</view>
						<text class="label">业绩目标</text>
					</view>
				</view>
				<view class="flex pt-40 pb-40">
					<view class="utim flex align-center justify-center column w-25">
						<view>
							<text class="fsize-20">￥</text>
							<text>{{achievement.saleAmount}}</text>
						</view>
						<text class="label">销售业绩</text>
					</view>
					<view class="utim flex align-center justify-center column w-25">
						<view>
							<text class="fsize-20">￥</text>
							<text>{{achievement.serviceAmount}}</text>
						</view>
						<text class="label">服务业绩</text>
					</view>
					<view class="utim flex align-center justify-center column w-25">
						<view>
							<text class="fsize-20">￥</text>
							<text>{{achievement.stockholderAmount}}</text>
						</view>
						<text class="label">联创业绩</text>
					</view>
					<view class="utim flex align-center justify-center column w-25">
						<view>
							<text class="fsize-20">￥</text>
							<text>{{achievement.suggestAmount}}</text>
						</view>
						<text class="label">推荐业绩</text>
					</view>
				</view>
			</view>
		</view>
		<view class="data">
			<u-sticky bgColor="#fff">
				<u-tabs 
					activeStyle="{color:#e54d42 }" 
					lineColor="#e54d42" 
					scrollable
					lineWidth="60" 
					:current="current"
					:list="tags" 
					@change="tagChange" 
				/>
			</u-sticky>
			<view>
				<view class="my-list">
					<u-list v-if="dataList.length > 0">
						<u-list-item v-for="(item, index) in dataList" :key="item.id">						  
							<view 
								class="bg-white border-radius-10 mt-20" 
								v-if="current===0" 
								@click="$u.route(
									item.orderType===12?'/pages/order/details/cardDetails':
									item.orderType===11?'/pages/order/details/projectDetails':
									item.orderType===1?'/pages/order/details/productDetails':
									'/pages/order/details/joinDetails',
									{id:item.orderType===14?item.id:item.orderId}
								)">
								<view class="border-b padding-20">
									<view class="fweigh-600">{{item.orderTypeText}}</view>
									<view class="flex mt-10">
										<view class="w-50">
											<text class="fsize-26">业绩金额:</text>
											<text class="line-red fsize-24 ml-10">￥</text>
											<text class="line-red">{{item.orderAmount}}</text>
										</view>
										<view class="w-50">
											<text class="fsize-26">提成金额:</text>
											<text class="line-red fsize-20 ml-10">￥</text>
											<text class="line-red">{{item.bonusAmount}}</text>
										</view>
									</view>
								</view>
								<view class="fsize-26 padding-20">
									<text class="line-blue">{{item.bonusTypeText}}</text>
									<text class="line-gray ml-10">·</text>
									<text class="line-gray ml-10">{{item.statusText}}</text>
									<text class="line-gray ml-10">·</text>
									<text class="line-gray ml-10">{{item.createTime}}</text>
								</view>
							</view>
							<view class="item" v-if="current===1">
								<text class="fweigh-600 fsize-28">{{item.message}}</text>
								<view class="flex justify-between align-center fsize-24 mt-10">
									<text class="line-gray">{{item.createTime}}</text>
									<view class="line-red">
										<text class="fsize-20">￥</text>
										<text class="fsize-30">{{item.money}}</text>
									</view>
								</view>
							</view>
							<view class="item fsize-26 flex" v-if="current===2">
								<image class="width-100 height-100 border-radius-10 shrink0" :src="item.image||'../../../static/logo.png'" />
								<view class="w-100 ml-20">
									<view class="fsize-30 fweigh-600">{{item.projectName}}</view>
									<view class="mt-10 fsize-40 text-red">
										<text class="fsize-24">￥</text>
										<text class="fsize-30">{{item.price}}</text>
									</view>
								</view>
							</view>
							<view 
								class="item fsize-28" 
								@click="$u.route('/pages/shop/Staff/workshift', {id: item.id, staffId:seData.staffId})"
								v-if="current===3"
							>
								<view class="flex">
									<uni-icons custom-prefix="iconfont"  type="icon-date" size="18"/>
									<text class="ml-10">{{item.dateTitle}}</text>
								</view>
								<view class="flex mt-20">
									<uni-icons custom-prefix="iconfont"  type="icon-time" size="18"/>
									<text class="ml-10">{{item.timeStar}} - {{item.timeEnd}}</text>
								</view>
								<view class="flex justify-end">
									<u-tag text="删除该条" type="error" shape="circle" />
								</view>
							</view>
							<view class="item fsize-26" v-if="current===4">
								<view class="fsize-30 fweigh-600">{{item.storeName}}</view>
							</view>
						</u-list-item>
					</u-list>
					<view class="emptybox" v-if="dataList.length == 0">
						<u-empty icon-size="80" text="暂无数据" mode="data"></u-empty>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-button flex justify-end pt-20" v-if="current===3 || current===2 || current===4">
			<u-tag text="添加项目" type="error" @click="$u.route('/pages/selectPage/project?type=3&&staffId='+seData.staffId)" v-if="current===2"/>
			<u-tag text="添加排班" type="error" @click="$u.route('/pages/shop/Staff/workshift?staffId='+seData.staffId)" v-if="current===3"/>
			<u-tag text="添加门店" type="error" @click="$u.route('/pages/selectPage/store?type=2&&staffId='+seData.staffId)" v-if="current===4"/>
		</view>
		<u-datetime-picker
			:show="selectMonthShow"
			v-model="date"
			mode="year-month"
			closeOnClickOverlay
			@confirm="selectMonthConfirm"
			@cancel="selectMonthShow=false"
			@close="selectMonthShow=false"
		/>
		<u-popup
			:show="showJsPopup" 
			@close="closeJs"
			mode="center"
			:safeAreaInsetBottom="false"
			:round="10"
		>
			<view class="padding-20">
				<u--form labelPosition="left" :model="settlementForm" :rules="rules" ref="uForm" errorType="toast" labelWidth="80">
					<view class="pb-20 border-b fweight-600">提成结算标记</view>
					<u-form-item label="结算金额" prop="value" borderBottom>
						<u-input v-model="settlementForm.value" placeholder="请输入" border="none" type="digit"></u-input>
					</u-form-item>
					<u-form-item label="备注信息" prop="data" borderBottom>
						<u-input v-model="settlementForm.data" placeholder="本次操作的备注信息" border="none"></u-input>
					</u-form-item>
				</u--form>
				<view class="flex justify-end mt-20">
					<view><u-button text="取消" @click="closeJs"></u-button></view>
					<view class="ml-20"><u-button color="#e54d42" text="提交" @click="submitSettlement"></u-button></view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	import getDateTime from '@/common/getDataTime.js'
	export default {
		data() {
			return {
				date: getDateTime.dateTimeStr('y/m'),
				sdate: getDateTime.dateTimeStr('y/m'),
				current:0,
				showJsPopup:false,
				selectMonthShow:false,
				achievement:{
					canTocashBonus: 0,
					saleAmount: 0,
					saleBonus: 0,
					serviceAmount: 0,
					serviceBonus: 0,
					stockholderAmount: 0,
					stockholderBonus: 0,
					suggestBonus: 0,
					targetAmount: 0,
				},
				settlementForm: {
					data: '',
					dataType: "settlement",
					value: null,
					id: 0,
				},
				rules: {
					data: [{
						required: true, 
						message: '备注信息不能为空',
						trigger: ['change','blur'],
					},],
					value:[
						{
							required: true,
							message: '结算金额不能为空',
							trigger: ['change','blur'],
						}
					]
				},
				tags: [
					{ name: '业绩记录' }, 
					{ name: '提现记录'}, 
					{ name: '可服务项目'}, 
					{ name: '员工排班'}, 
					{ name: '可管理门店'}, 
				],
				dataList: [],
				searchData: {
					page: 1,
					limit: 99,
				},
				loadmore0:{
					status: 'loadmore',
					iconType: 'flower',
					loadText: {
						loadmore: '轻轻上拉',
						loading: '努力加载中',
						nomore: '实在没有了'
					},
				},
				seData: {
					staffId: null,
					page: 1,
					limit: 99
				}
			}
		},
		computed: {
			...mapState(['store'])
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(option) {
			let that = this
			this.seData.staffId = option.id;
			this.settlementForm.id = option.id
			this.getachievement()
			this.getPageList()
			// uni.$on('time', (obj) => {
			// 	console.log('sa', obj)
			// })
			uni.$on('upList', (ix) => {
				that.current = ix
				that.getPageList()
			})
		},
		onUnload() {
			// 移除监听事件
			// uni.$off('time')
			uni.$off('upList')
		},
		methods: {
			submitSettlement(){
				this.$refs.uForm.validate().then(res => {
					this.$reqJsonPost('StaffSettlementDoCreate', this.settlementForm).then(res=>{
						this.getachievement()
						this.getPageList()
						this.showJsPopup = false
						uni.$u.toast('结算成功!')
					})
				})
			},
			closeJs(){
				this.settlementForm.data = ""
				this.settlementForm.value = null
				this.showJsPopup = false
			},
			selectMonthConfirm(e){
				this.date = uni.$u.timeFormat(e.value, 'yyyy-mm')
				this.sdate = uni.$u.timeFormat(e.value, 'yyyy-mm')
				this.selectMonthShow = false
				this.getachievement()
			},
			tagChange(e) {
				if(this.current === e.index) return
				this.current = e.index;
				this.getPageList()
			},
			getachievement(){
				this.$reqJsonPost('GetStaffDetails',{id: this.seData.staffId, data:this.sdate}).then(res=>{
					this.achievement = res.data;
				})
			},
			getPageList(){
				this.$reqPost(
					this.current===0?'GetStoreStaffBonusList':
					this.current===1?'CoreCmsStoreStaffSettlementGetPageList':
					this.current===2?'StoreStaffProjectsGetPageList':
					this.current===3?'StoreStaffScheduleList':
					this.current===4?'GetUserStorePageList':'',
					this.seData).then(res=>{
					this.dataList = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-panel {
		padding: 20rpx;
		background: linear-gradient(to bottom right,#db345c,#ee5a6b);
		position: relative;
		min-height: 200rpx;
		.selectMonth{
			position: absolute;
			right: 20rpx;
			top: 40rpx;
			width: 200rpx;
			height: 48rpx;
			line-height: 48rpx;
			background:rgba(255,255,255,0.9);
			border-radius: 50rpx;
			font-size: 24rpx;
			color:#111;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.amount{
			margin-top: 70rpx;
			text-align: center;
			color: #fff;
			font-size: 38rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.achievementachievement{
			margin:30rpx 10rpx 20rpx;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 30rpx;
			.value{
				color: red;
			}
			.label{
				color:gray;
			}
		}
		.img {
			display: block;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			flex-shrink: 0;
		}
		.utim {
			font-size: 26rpx;
			line-height: 40rpx;
		}
	}
	.ugrid {
		width: 710rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;

		.ugrid-title {
			padding: 20rpx 20rpx 0 20rpx;
			font-size: 28rpx;
			font-weight: 600;
		}
	}

	.grid-text {
		font-size: 28rpx;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
	}
	.margin-top--60{
		margin-top: -60rpx;
	}
	.station{
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);  
	}
</style>
